<template>
  <div id="myWallet" class="myWalletMain" ref="body">
    <div class="myWallet" style="width:100%;min-height:14rem;padding-bottom:1.5rem;">
      <div class="notice" @click="goCourse">
        <div class="noticeList">
          <div class="noticeItem">
            <img class="noticeImg" src="../../static/img/notice.png" alt>
            <div class="noticeName">中青看点</div>
            <span>赚钱秘籍，为什么很多人每天能赚上万青豆</span>
          </div>
        </div>
      </div>
      <div class="userInfo">
        <div class="userInfoNum">
          <div class="btn">
            <span class="num">当前青豆</span>
            <span class="button" @click="goGetMoney">立即提现</span>
          </div>
          <div class="moneyNum">{{userInfo.score}}</div>
          <div class="brige">约{{userInfo.money}}元</div>
        </div>
        <div class="details">
          <div class="todayNum">
            <div class="text">今日青豆</div>
            <div class="num">{{userInfo.today_score}}</div>
          </div>
          <div class="todayNum">
            <div class="text">累计获得青豆</div>
            <div class="num">{{userInfo.total_score}}</div>
          </div>
          <div class="allNum"></div>
        </div>
        <div class="bottom">1000青豆 = 1元</div>
        <div class="bgImage">
          <img src="../../static/img/bg.png" alt>
        </div>
      </div>
      <!-- 没数据 -->
      <div class="noDataMain" v-if="noDataList">
        <div class="noDataImg">
          <img src="https://res.youth.cn/vue/img/nodata_icon.png" alt>
        </div>
        <p>暂无收益记录</p>
        <p>快去阅读，分享赚青豆吧!</p>
      </div>
      <!-- 有数据 -->
      <div class="hasData" v-if="!noDataList">
        <div class="numLine">
          <div class="numLineTitle">过去七天青豆收益</div>
          <div class="lineMain">
            <!-- vue-schart 插件  -->
            <schart
              class="wrapper"
              :canvasId="canvasId"
              :type="type"
              :data="canvasData"
              :options="options"
            ></schart>
          </div>
        </div>
        <div class="detailsList">
          <div
            class="detailsItem"
            v-for="(item,key,index) in historyList"
            :key="index"
            :index="index"
          >
            <div class="itemLeft">
              <div class="title">{{item.name}}</div>
            </div>
            <div class="itemRight">
              <div class="title">{{item.type}}{{item.money}}</div>
              <div class="titleInfo">{{item.date}} {{item.time}}</div>
            </div>
          </div>
        </div>
        <div class="loadMore" v-if="loadMore">
          <div class="icon">
            <img src="https://res.youth.cn/active/one/img/loading.png" alt>
          </div>
          <p class="loadingText">正在加载</p>
        </div>
        <div class="noData" v-if="noData">没有更多数据了</div>
      </div>
    </div>
    <div class="bottomBtn">
      <div class="bottomBtnLeft" @click="goRankList">
        <div class="prize">
          <img src="https://res.youth.cn/vue/img/prize.png" alt>
        </div>
        <div class="text">收入榜</div>
      </div>
      <div class="bottomBtnRight" @click="share">
        <div class="prize">
          <img
            style="width:0.26rem;height:0.32rem; "
            src="https://res.youth.cn/vue/img/hb_icon.png"
            alt>
        </div>
        <div class="text">给好友发红包</div>
      </div>
    </div>
  </div>
</template>
<script>
import Schart from "vue-schart";
import BScroll from "better-scroll";
import $http from "@build/url";
export default {
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      canvasId: "myCanvas",
      type: "line",
      loadingText: "加载中",
      canvasData: [
        { name: "1", value: 1 },
        { name: "2", value: 2 },
        { name: "3", value: 3 },
        { name: "4", value: 4 },
        { name: "5", value: 5 },
        { name: "6", value: 6 },
        { name: "7", value: 7 }
      ],
      options: {
        autoWidth: true,
        showValue: true, // 是否在图表中显示数值
        yEqual: 3, // y轴分成5等分
        fillColor: "#edb428"
      },
      userInfo: {},
      historyList: [],
      page: 1,
      canvasList: {},
      newMain: {},
      urlData:{},
      loadMore: false,
      noDataList: false,
      shareConfig: [],
      noData: false
    };
  },
  components: {
    Schart
  },
  created() {
    this.$loading("加载中", "open");
  },
  mounted() {
      this.urlData=this.getUrlPrmt()
      this.newBscroll();
      this.getUserInfo();
      this.getIncomeDe();
      this.getShareInfo();
      this.newMain.refresh();
  },
  methods: {
    getUrlPrmt: function getUrlPrmt(url) {
      url = url ? url : window.location.href;
      var _pa = url.substring(url.indexOf("?") + 1),
        _arrS = _pa.split("&"),
        _rs = {};
      for (var i = 0, _len = _arrS.length; i < _len; i++) {
        var pos = _arrS[i].indexOf("=");
        if (pos == -1) {
          continue;
        }
        var name = _arrS[i].substring(0, pos),
          value = window.decodeURIComponent(_arrS[i].substring(pos + 1));
        _rs[name] = value;
      }
      return _rs;
    },
    setUrlPrmt: function setUrlPrmt(obj) {
    var _rs = [];
    for (var p in obj) {
      if (obj[p] != null && obj[p] != "") {
        _rs.push(p + "=" + obj[p]);
      }
    }
    return _rs.join("&");
  },
    newBscroll() {
      var that = this;
      this.newMain = new BScroll(".myWalletMain", {
        scrollY: true,
        click: true, // 插件默认会阻止默认事件
        tap: true,
        pullUpLoad: {
          // 上拉加载更多
        }
      });
      // 模拟上拉上载更多
      this.newMain.on("pullingUp", function() {
        that.page++;
        that.urlData.page = that.page;
        if(!that.noData){
          that.loadMore = true;
        }
        that.getIncomeDe();
        this.refresh();
        this.finishPullUp();
      });
    },
    getUserInfo() {
      // 获取个人信息
      $http.get("/wap/user/balance?"+this.setUrlPrmt(this.urlData)).then(res=>{
        this.$loading("加载中", "close");
          this.userInfo = res.data.user;
          this.userInfo.money = res.data.user.money.toFixed(3);
          this.canvasList = res.data.history;
          for (var i = 0; i < this.canvasList.length; i++) {
            console.log(this.canvasList[i].score);
            this.$set(this.canvasList[i], "name", this.canvasList[i].date);
            this.$set(this.canvasList[i], "value", this.canvasList[i].score);
          }
          this.canvasData = this.canvasList.reverse();
          console.log("折线图数据", this.canvasData);
      })
      .catch(err => {
          console.log(err);
        });
      
    },
    getIncomeDe() {
      // 获取收入明细
      let that = this;
        $http.get("/wap/user/balanceList?"+this.setUrlPrmt(this.urlData))
        .then(res => {
          if (this.page == 1 && JSON.stringify(res.data.list) === "[]") {
            this.noDataList = true;
            return false;
          }
          if (JSON.stringify(res.data.list) === "[]") {
            this.loadMore = false;
            this.noData = true;
            return false;
          }
          if (res.data.list.length <= 3) {
            this.noData = true;
          }
          for (let i = 0; i < res.data.list.length; i++) {
            this.historyList.push(res.data.list[i]);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    goCourse() {
      window.location.href = "https://kd.youth.cn/html/invite/explain15.html";
    },
    goGetMoney() {
      this.$loading("跳转中", "open");
      setTimeout(() => {
        this.$loading("跳转中", "close");
      }, 1000);
      // 跳转到提现页面
      this.$Bridge.callhandler("toExchange", "{}");
    },
    goRankList() {
      this.$loading("跳转中", "open");
      setTimeout(() => {
        this.$loading("跳转中", "close");
      }, 1000);
      window.location.href =
        "https://kd.youth.cn/user/rankingweek?uid=" + this.urlData.uid;
    },
    share() {
      // 分享好友
      this.$loading("分享中", "open");
      setTimeout(() => {
        this.$loading("分享中", "close");
      }, 1000);
      let options = {
        url: this.shareConfig.share_url,
        thumb: this.shareConfig.thumb,
        title: this.shareConfig.title,
        description: this.shareConfig.description,
        share_way: 1,
        share_way_wechat: 1
      };
      this.$Bridge.callhandler("shareWxhy", options);
    },
    getShareInfo() {
      // 获取分享的标题和图片
      

      $http.get("/wap/user/getShareConfig?"+this.setUrlPrmt(this.urlData)).then(
        res => {
          console.log(res.data.data)
          if (!res.data.data) {
            this.$toast.center("分享数据为空");
            return false;
          }
          this.shareConfig = res.data.data;
        },
        err => {
          console.log(err);
        }
      );
    }
  },
  destroyed() {
    this.$loading("", "close");
  }
};
</script>

<style lang="less" scoped>
    @import url("./index.less");
</style>
